<template>
  <div style="height: 100%;">
    <main class="NavMenu">
      <a id="index" tabindex="index" @click="jump('index')">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </a>
      <a id="classify" tabindex="classify" @click="jump('classify')">
        <i class="el-icon-menu"></i>
        <span>分类</span>
      </a>
      <a id="shopCar" tabindex="shopCar" @click="jump('shopCar')">
        <b style="font-family: iconfont;">&#xe865;</b>
        <span>购物车</span>
      </a>
      <a id="mine" tabindex="mine" @click="jump('mine')">
        <i class="el-icon-user-solid"></i>
        <span>我的</span>
      </a>
    </main>
  </div>
</template>

<script>
  export default{
  	name:"navMenu",
  	data(){
  		return {
  		}
  	},
    created() {
    },
    mounted(){
      this.NavChild()
      this.Nav()
    },
  	methods:{
      /* 默认给footer的所有子元素添加单击事件 */
      NavChild(){
        console.log('进入方法')
        var list = document.getElementsByClassName("NavMenu")[0].children
        console.log()
        for(var i=0;i<list.length;i++){
          if(list[i]!=null){
            list[i].onclick = function(){
              
              for(var j=0;j<list.length;j++){
                list[j].className=""
              }
              this.className = 'current'
            }
          }
        }
      },
      Nav(){
        var url = sessionStorage.getItem("lastPage");
        if(window.location.href.split("/").reverse()[1] == 'home'){
          var id = window.location.href.split("/").pop();
          //先清除所有子元素的当前样式('current')
          document.getElementsByClassName("NavMenu")[0].children.className = ''
          //再给当前子元素的样式加上当前样式('current')
          document.getElementById(id).classList = 'current'
        }else{
          document.getElementById('index').classList = 'current'
        }
      },

      /* 自定义跳转事件 */
  		jump(params){
  			this.$router.push({path:`/home/${params}`})
  		}
  	}
  }
</script>

<style scoped>
  .NavMenu{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
  }
  /* 当前被选中页面 */
  .current{
    color: #762603 !important;
  }
  .NavMenu a{
    display: flex;
    flex-direction: column;
    color: #b3b3b3;
  }
  .NavMenu a i{
    font-size: 30px;
  }
  .NavMenu a b{
    font-size: 30px;
    font-weight: 400;
  }
  .NavMenu a span{
    font-size: 13px;
  }
</style>
